<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import DeleteUserForm from '@/Pages/Profile/Partials/DeleteUserForm.vue';
import LogoutOtherBrowserSessionsForm from '@/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue';
import TwoFactorAuthenticationForm from '@/Pages/Profile/Partials/TwoFactorAuthenticationForm.vue';
import UpdatePasswordForm from '@/Pages/Profile/Partials/UpdatePasswordForm.vue';
import UpdateProfileInformationForm from '@/Pages/Profile/Partials/UpdateProfileInformationForm.vue';
import AvatarUpload from '@/Components/Features/AvatarUpload.vue'
import InputLabel from '@/Components/Forms/InputLabel.vue'

defineProps({
    confirmsTwoFactorAuthentication: Boolean,
    sessions: Array,
});

// 处理头像上传成功
const handleAvatarUploaded = (url) => {
    // 更新用户头像
    form.profile_photo_path = url
}
</script>

<template>
    <AppLayout title="个人资料">
        <template #header>
            <div class="md:flex md:items-center md:justify-between">
                <div class="min-w-0 flex-1">
                    <h2 class="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:truncate sm:text-3xl sm:tracking-tight">
                        个人资料
                    </h2>
                </div>
            </div>
        </template>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="space-y-10 divide-y divide-gray-900/10 dark:divide-gray-700">


                    <!-- 头像上传 -->
                    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
                        <div class="px-4 sm:px-0">
                            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">头像</h2>
                            <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                                更新您的头像。
                            </p>
                        </div>

                        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700 rounded-lg md:col-span-2">
                            <div class="px-4 py-6 sm:p-8">
                                <div class="col-span-6 sm:col-span-4">
                                    <InputLabel for="photo" value="头像" />
                                    
                                    <!-- 头像上传组件 -->
                                    <div class="mt-2">
                                        <AvatarUpload
                                            :current-avatar="$page.props.auth.user.profile_photo_url"
                                            upload-url="/profile/avatar"
                                        />
                                        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">
                                            点击头像即可更换。支持 JPG、PNG、GIF 格式，最大 2MB。
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 个人信息 -->
                    <div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-3">
                        <div class="px-4 sm:px-0">
                            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">个人信息</h2>
                            <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                                更新您的个人信息和邮箱地址。
                            </p>
                        </div>

                        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700 rounded-lg md:col-span-2">
                            <div class="px-4 py-6 sm:p-8">
                                <UpdateProfileInformationForm :user="$page.props.auth.user" />
                            </div>
                        </div>
                    </div>

                    <!-- 安全设置 -->
                    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
                        <div class="px-4 sm:px-0">
                            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">安全设置</h2>
                            <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                                确保您的账户安全。
                            </p>
                        </div>

                        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700 rounded-lg md:col-span-2">
                            <div class="px-4 py-6 sm:p-8 space-y-8">
                                <UpdatePasswordForm />
                                <TwoFactorAuthenticationForm :requires-confirmation="confirmsTwoFactorAuthentication" />
                            </div>
                        </div>
                    </div>

                    <!-- 会话管理 -->
                    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
                        <div class="px-4 sm:px-0">
                            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-white">会话管理</h2>
                            <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                                管理您的登录会话。
                            </p>
                        </div>

                        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700 rounded-lg md:col-span-2">
                            <div class="px-4 py-6 sm:p-8">
                                <LogoutOtherBrowserSessionsForm :sessions="sessions" />
                            </div>
                        </div>
                    </div>

                    <!-- 删除账户 -->
                    <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
                        <div class="px-4 sm:px-0">
                            <h2 class="text-base font-semibold leading-7 text-red-600 dark:text-red-500">删除账户</h2>
                            <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">
                                永久删除您的账户。
                            </p>
                        </div>

                        <div class="bg-white dark:bg-gray-800 shadow-sm ring-1 ring-gray-900/5 dark:ring-gray-700 rounded-lg md:col-span-2">
                            <div class="px-4 py-6 sm:p-8">
                                <DeleteUserForm />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>
